<template>
  <div>
    <h2>类组件</h2>
    <h3>data数据</h3>
    <div>{{msg1}}</div>
    <div>undefined 非响应式</div>
    <div>{{msg4}} null</div>
    <div>{{msg}}</div>
    <h3>计算属性</h3>
    <div>{{cptMsg1}}</div>
    <h3>事件</h3>
    <button @click="show(12, 'bmw')">事件</button>
    <h3>props</h3>
    <div>{{p1}}</div>
    <div>{{msg2}}</div>
    <h3>ref</h3>
    <div ref="box">box</div>
    <h3>指令</h3>
    <div v-direct1>direct1</div>
    <div v-direct1="'qq'">direct1</div>
    <h3>过滤器</h3>
    <div>{{"bmw" | filt1}}</div>
  </div>
</template> 
<script lang="ts">
import Vue from 'vue'
// 需要使用装饰器，将一个普通vue类，装饰成一个vue组件
import { Component, Prop, Watch, Ref } from 'vue-property-decorator' // 用装饰器的形式装饰vue的属性
import { Person } from '../types'
// 用类的形式定义了一个vue组件
@Component({
  // 指令，过滤器
  // 全局 vue.js
  // 局部
  directives: { // 局部指令
    direct1:(el: HTMLElement, binding)=>console.log('direct1',binding.value)
  },
  filters: { // 局部过滤器
    filt1(data:string,arg:number=2):string{
      return '过滤后的数据' + arg
    } 
  }
}) 
export default class ClassComponent extends Vue {
  
  // props定义 需要依赖装饰器
  @Prop() readonly p1!: string; // !操作符（Bang Operator）显示地告诉编译器它的值不为空
  @Prop({default: 'props默认值'}) readonly p2: string | undefined; // 默认值
  @Prop({default: 110, type: Number}) readonly p3: number | undefined; // 类型约定

  // @Prop() private readonly p4:string="qq"; // 这种给默认值是不推荐的，报错

  // 元数据 data --> 类内的实例属性
  msg1:string = "类内的实例属性msg1"
  msg2:string = "类内的实例属性props-" + this.p1
  msg3:undefined = undefined; // undefined 非响应式（不要这么写）
  msg4:any = null; // 页面不渲染，响应式

  msg:Person = {
    id: 1,name:'lisa',age: 18
  }
  // 实例方法 methods 
  show(arg1: number, arg2: string):void{
    alert('类组件的实例方法' + arg1 + arg2)
  }
  // 计算属性
  get cptMsg1():string{
    return '经过计算后的msg1' + this.msg1
  }
 // 钩子函数 
  mounted():void {
    console.log('class component mounted')
    this.bbox.style.background = 'red'
  }
  // 属性监测
  @Watch('msg1')
  onMsg1Change(newValue: string, oldValue: string):void{
    console.log('msg1数据变化了', newValue, oldValue)
  }
  @Watch('msg', {deep: true, immediate: true})
  onMsgChange(newValue: string, oldValue: string):void{
    console.log('msg1数据变化了', newValue, oldValue)
  }

  // ref 引用元素
  @Ref('box') bbox!: HTMLDivElement

}

</script>
